<template>
  <div class="CeremonyHall  h100" v-loading="loading">
    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="80px" class="PageItem margintop20">
        <el-row :gutter="11" class="fileSearch">
          <el-form-item label="手机号:" prop="loginPhone">
            <el-input v-model="ruleForm.loginPhone" clearable></el-input>
          </el-form-item>
          <el-form-item label="姓名:" prop="fullName">
            <el-input v-model="ruleForm.fullName" clearable></el-input>
          </el-form-item>
          <el-form-item label="审核状态:" prop="auditState">
            <!--            <el-input v-model="ruleForm.auditState" clearable></el-input>-->
            <el-select v-model="ruleForm.auditState" placeholder="请选择" class="user-dialog-input">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-if="btnRight.btnSearchAppUser" icon="el-icon-search" type="primary"  @click="onSubmit('search')">
              查询
            </el-button>
            <el-button v-if="btnRight.btnResetAppUser"  icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-row>
        <el-row :gutter="11">
          <el-form-item  style='margin-left:10px'>
            <el-button v-if="btnRight.btnAddAppUser" type="primary" icon="el-icon-plus"  @click="showUserRecordAddDialog">
              添加用户
            </el-button>
          </el-form-item>
        </el-row>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight">
          <el-table-column
            type="index"
            label="编号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            align='center'
            label="注册日期">
          </el-table-column>
          <el-table-column
            prop="fullName"
            align='center'
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="loginPhone"
            align='center'
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="auditState"
            align='center'
            label="审核状态">
            <template slot-scope="scope">
              <span :style="changeStyle(scope.row.auditState)">{{  statusData(scope.row.auditState)  }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="asLogin" align='center' label="是否可以登录">
            <template slot-scope="scope">
              <el-button :type="scope.row.asLogin === 0 ? 'danger':'success'" @click="updateStatus(scope.row)"
                         size="mini">{{scope.row.asLogin === 0 ? '否':'是'}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300px">
            <template slot-scope="scope">
              <el-button v-if="btnRight.btnEditAppUser" type="primary"  size="mini" @click="editUserRecordDialog(scope.row)">编辑</el-button>
              <el-button v-if="btnRight.btnDeleteAppUser" type='danger' size="mini"  @click="deleteUserRecordDialog(scope.row)">删除</el-button>
              <el-button  v-if="btnRight.btnResetAppUserPassword" type='warning' size="mini"  @click="resetPassword(scope.row.id)">重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div style="text-align: center;
                    height: 0px;
                    line-height: 20px;
                    font-size: 18px;">
          显示{{ pager.total === 0 ? 0 : (Math.ceil(pager.total / pager.pageSize) > 1 ? ((pager.currentPage - 1) *
          pager.pageSize + 1) : (1)) }}到{{ pager.total === 0 ? 0 : ((Math.ceil(pager.total / pager.pageSize) ===
          pager.currentPage) ? (pager.total) : (pager.currentPage * pager.pageSize)) }}条
        </div> -->
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            background
            layout="total,sizes,prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </el-form>

      <!-- 新增弹窗 -->
      <userRecordAddDialog
        :dialogVisible="userRecordAddDialog.dialogVisible"
        :roomData="userRecordAddDialog.roomData"
        @dialogCancle="dialogCancle"
      ></userRecordAddDialog>
      <!-- 编辑弹窗 -->
      <userRecordEditDialog
        :dialogVisible="userRecordEditDialog.dialogVisible"
        :room="userRecordEditDialog.room"
        @dialogCancle="editDialogCancle"
      ></userRecordEditDialog>
    </div>
  </div>
</template>

<script>
  import * as Type from '@/api/cemetery/cemetery'
  import userRecordAddDialog from "./userRecord_add_dialog";
  import userRecordEditDialog from "./userRecord_edit_dialog";

  export default {
    name: "UserRecord",
    data() {
      return {
        loading: false,
        type: [],
        ruleForm: {
          loginPhone: "",
          fullName: "",
          auditState: ""
        },
        pager: {
          pageSize: 20,
          total: 1,
          currentPage: 1
        },
        tableData: [],
        dictionary: {},
        tableHeight: 0,
        //按钮权限
        btnRight: {
          btnSearchAppUser: false, //查询
          btnResetAppUser:false,//重置
          btnAddAppUser:false,//添加用户
          btnEditAppUser:false,//编辑
          btnDeleteAppUser:false,//删除
          btnResetAppUserPassword:false,//重置密码
        },
        userRecordAddDialog: {
          dialogVisible: false,
          roomData: {}
        },
        userRecordEditDialog: {
          dialogVisible: false,
          room: {}
        },
        //审核状态
        typeOptions: [
          {value: 0, label: '未审核'},
          {value: 1, label: '已通过'},
          {value: 2, label: '未通过'}
        ],

      }
    },
    components: {
      userRecordAddDialog,
      userRecordEditDialog
    },
    //载入按钮
    mounted() {
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (var key of Object.keys(this.btnRight)) {
        this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] == "true") ? true : false;
      }

      // this.$store.dispatch('user/getdictionary').then((res) => {     //获取字典数据
      //   this.dictionary = res;
      //   this.$set(this.dictionary, res)
      // }).catch(() => console.log('promise catch err'))
      // this.defaultValue();
      this.onSubmit()
      var that = this
      window.onresize = function () {
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        that.tableHeight = dom - search - 190
      }
    },
    //注销window.onresize事件
    destroyed() {
      window.onresize = null;
    },
    updated() {
      this.$nextTick(() => {
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        this.tableHeight = dom - search - 190
      })
    },
    methods: {
      //重置密码
      async resetPassword(id){
        const confirmResult=await this.$confirm('您确定重置密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(confirmResult!=='confirm'){return this.$message.info("已取消操作！")}
        let postData={
          "type":"appUser",
          "uid":id,
        }
        const res= await Type['resetAppUserPassword'](postData)
        
        if(res.code===1){
          this.$message.success(res.message)
        }else{
          this.$message.error(res.message)
        }
      },
      changeStyle(status) {
        if (status == 0) {
          return
        } else if (status == 1) {
          return 'color: green;'
        } else {
          return 'color: red;'
        }
      },
      changeStyle2(status) {
        if (status == 0)
          return 'color: red;'
        else if (status == 1)
          return 'color: green;'
      },
      statusData(val) {
        if (val == 0) {
          return '未审核'
        } else if (val == 1) {
          return "已通过"
        } else {
          return "未通过"
        }
      },
      asLoginData(val) {

        if (val == 0) {
          return '否'
        } else if (val == 1) {
          return "是"
        }
      },
      //默认初始值方法
      defaultValue() {
      },

      onSubmit(value) {
        var that = this;
        this.loading = true
        if (value) {
          this.pager.currentPage = 1;
        };
       // console.log("submitPageSize:"+that.pager.pageSize);


        var postData = {
          "loginPhone": this.ruleForm.loginPhone,
          "fullName": this.ruleForm.fullName,
          "auditState": this.ruleForm.auditState,
          "pageSize": that.pager.pageSize,
          "currentPage": this.pager.currentPage,
          "orderField	": "",     //排序字段
          "orderType": ""        //排序顺序
        }

        //查询接口
        //console.log(postData)
        Type['getUserRecord'](postData).then(response => {
         // console.log(response)
          const {data} = response;
          if (!data) {
            this.loading = false;
            this.$message('数据读取失败')
            return
          }
          this.tableData = data.list;
          data.pager.pageSize = that.pager.pageSize;
          this.pager = data.pager
          this.loading = false
          //数据读取成功
        }).catch(error => {
          this.$message(error)
          this.loading = false
          this.tableData = []
        })
      },

      deleteUserRecordDialog(row) {
        let message = "确认删除手机号：" + row.loginPhone + " ?";
        let postData = {
          "id": row.id
        }
        //console.log(postData.id)
        this.$confirm(message, "提示", {})
          .then(() => {
            Type['deleteUserRecord'](postData).then(res => {
              this.$message({
                message: res.message,
                type: "success"
              });
              this.onSubmit();
            })
              .catch(res => {
              });
          })
          .catch(() => {
          });
      },

      updateStatus(row) {
        let postData = {
          "id": row.id
        }
        Type['apiUpdateStatus'](postData).then(res => {
          this.$message({
            message: res.message,
            type: "success"
          });
          this.onSubmit();
        })
          .catch(res => {
          });
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.$refs["ruleForm"].resetFields();
        this.onSubmit();
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pageSize = size;
        this.onSubmit()
      },
      handleCurrentChange: function (currentPage) {
        this.pager.currentPage = currentPage;
        this.onSubmit()  //点击第几页
      },

      // 新增墓穴类型弹窗
      showUserRecordAddDialog() {
        this.userRecordAddDialog.dialogVisible = true;
        this.userRecordAddDialog.roomData = {};
      },
      //编辑墓穴类型
      editUserRecordDialog(row) {
        this.userRecordEditDialog.dialogVisible = true;
        this.userRecordEditDialog.room = row;
      },
      //关闭所有弹窗
      dialogCancle() {
        this.onSubmit();
        //
        this.userRecordAddDialog.dialogVisible = false;
        this.userRecordAddDialog.roomData = {};
      },
      editDialogCancle() {
        this.userRecordEditDialog.dialogVisible = false;
        this.userRecordEditDialog.room = {};
        this.onSubmit();
      }

    }
  }
</script>

<style scoped>

  .w150 {
    width: 150px;
  }
</style>
